<div id="chart-container"></div>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #chart-container {
        position: relative;
        height: 40vh;
        width: 100%;
        overflow: hidden;
    }
</style>

<script src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
    var dom = document.getElementById('chart-container');
    // init 方法来初始化一个图表实例 myChart
    // 第一个参数 dom 是指定图表容器的 DOM 元素
    // 第二个参数 null 是可选的，表示指定的主题名称。这里传入 null 表示不使用任何主题，将使用默认主题
    // 第三个参数是一个配置对象，用于提供额外的配置选项
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        title: {
            text: '本月'
        },
        tooltip: {
            trigger: 'axis'
        },
        // x 轴 类型与数据
        xAxis: {
            type: 'category',
            data: {$xdata},
            name: '日期'
        },
        // y 轴 类型与数据
        yAxis: {
            type: 'value',
            name: '业绩'
        },
        series: [
            {
                // 存放着对应 x 轴类目的数值数据，依次是周一到周日的数值
                data: {$da},
                // 表示该系列使用折线图进行展示
                type: 'bar',
                // smooth: true 表示启用平滑曲线
                // smooth:true
            }
        ]
    };

    if (option && typeof option === 'object') {
        // 将配置应用到图表实例
        myChart.setOption(option);
    }
    // 监听窗口的 resize 事件，实现了图表在窗口大小变化时的自适应调整
    window.addEventListener('resize', myChart.resize);
</script>

<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
        <div class="x_title">
            <h2>{$pri_name} <small></small></h2>
            <ul class="nav navbar-right panel_toolbox">
                {:check_create('create',['type_id'=>input('type_id')])}
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="x_content">
            <p class="text-muted font-13 m-b-30">
                <code>说明:</code>{$code}
            </p>
            <form id="search" action="{:url('index')}" />
            <input type="hidden" name="page" value="1"/>
            <div class="well" style="overflow: auto">

                <div class="col-md-1">
                    <select name="company_id" class="select2 js-states form-control"  style="width: 100%;">
                        <option value="0">全部公司</option>
                        {volist name="$company" id="item"}
                        <option value="{$item.id}" {eq name=":input('company_id')" value="$item.id"}selected{/eq}>{$item.title}</option>
                        {/volist}
                    </select>
                </div>                <div class="col-md-2">
                    <select name="worker_id" class="select2 js-states form-control"  style="width: 100%;">
                        <option value="0">全部员工姓名</option>
                        {volist name="$worker" id="item"}
                        <option value="{$item.id}" {eq name=":input('worker_id')" value="$item.id"}selected{/eq}>{$item.title}</option>
                        {/volist}
                    </select>
                </div>                <div class="col-md-1">
                    <select name="worker_depart_id" class="select2 js-states form-control"  style="width: 100%;">
                        <option value="0">全部所属部门</option>
                        {volist name="$depart" id="item"}
                        <option value="{$item.id}" {eq name=":input('worker_depart_id')" value="$item.id"}selected{/eq}>{$item.title}</option>
                        {/volist}
                    </select>
                </div>                <div class="col-md-1">
                    <select name="worker_type_id" class="select2 js-states form-control"  style="width: 100%;">
                        <option value="0">全部所属岗位</option>
                        {volist name="$worker_type" id="item"}
                        <option value="{$item.id}" {eq name=":input('worker_type_id')" value="$item.id"}selected{/eq}>{$item.title}</option>
                        {/volist}
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="text" name="create_time" autocomplete="off" class="form-control" id="interval_timer" style="width: 100%" placeholder="请选择时间区间..." value="{:input('create_time')}">
                </div>

                <div class="col-md-1">
                    <button type="submit" class="btn btn-success">搜 索</button>
                </div>
            </div>
            </form>
            <div style="overflow: auto">
                <table id="datatables" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <!--<th><input type="checkbox" onclick="CheckAll(this.checked)"></th></th>-->
                        <th width="20">
                        <input type="checkbox" onclick="CheckAll(this.checked)"></th>
                    </th>
                        <th width="40" style="text-align: center;">ID</th>
                        <th >公司名称</th>
                        <th >所属部门</th>
                        <th >所属岗位</th>
                        <th >员工姓名</th>
                        <th >员工手机号</th>
                        <th >报单金额</th>

                        <th width="140">创建时间</th>
                        <th width="130">操作</th>
                    </tr>
                    </thead>

                    <form id="form_volist">
                     <tbody>
                        {volist name="data" id="vo"}
                        <tr>
                            <th width="20">
                        <input type="checkbox" name="id[]" value="{$vo.id}"/>
                    </th>
                            <td width="40" style="text-align: center;">{$vo.id}</td>
                            <td>{$vo.company_title}</td>

                            <td>{$vo.worker_depart_title}</td>

                            <td>{$vo.worker_type_title}</td>
                            <td>{$vo.worker_name}</td>
                            <td>{$vo.worker_mobile}</td>
                            <td>{$vo.price}</td>

                            <td>{$vo.create_time}</td>
                            <td>
                                {:check_update('update',['id' => $vo.id])}
                                {:check_destory('destory',['id' => $vo.id])}
                            </td>
                        </tr>
                        {/volist}
                    </tbody>
                    </form>

                        <script>
                            $('#upload').click(function () {
                                $("#read").submit();
                            });
                        </script>
                    <tfoot align="left">
                    <tr>
                        <td colspan="100">
                            <span>控制：<a href="{:session(request()->controller().'_url_excel')}" style="color:#428BCA;cursor: pointer" >导出数据</a></span>

                        </td>
                    </tr>
                    </tfoot>

                </table>
            </div>

            <div style="text-align: right;">{$data|raw}</div>
        </div>
    </div>
</div>
<script>
    $('[name="company_id"]').change(function () {
        var company_id = $(this).val();
        $.ajax({
            type: 'POST',
            url: "{:url('api/Worker/all')}",
            data: {company_id: company_id},
            success: function (ret) {
                console.log(ret);
                $('[name="worker_id"]').html('');
                var str = '<option value=""> --请选择员工-- </option>';
                $.each(ret.data,function (k,v) {
                    str += '<option value="'+v['id']+'">'+v['title']+'</option>';
                })
                $('[name="worker_id"]').html(str);
            }
        });
    });
</script>

